<template>
  <div id="topology-canvas" style="overflow:hidden;"></div>
</template>
<script>
import {Topology, Node, Line, Point, Lock} from '@topology/core'
// 配置项
const canvasOptions = {
  width: 800,
  height: 400,
  font: {
    color: '#000',
    fontSize: 12
  },
  // 连线颜色
  color: '#000',
  keydown: -1,
  disableEmptyLine: true,
  disableScale: true,
  maxScale: 2,
  autoAnchor: false,
  autoExpandDistance: 0
}
const timex = 28.34 * (1 / (config.width * 28.34 / 800))
const timey = 28.34 * (1 / (config.height * 28.34 / 400))
export default {
  data() {
    return {
      canvas: null,
    }
  },
  props: {
    formData: Object
  },
  mounted() {
    this.initCanvas()
  },
  beforeDestroy() {
    this.canvas.destroy()
    this.canvas = null
  },
  methods: {
    initCanvas() {
      this.canvas = null
      canvasOptions.on = this.onMessage
      this.canvas = new Topology('topology-canvas', canvasOptions)
      this.canvas.addNode(new Node({
        text: this.formData.titleShow ? this.formData.name : '',
        rect: {
          width: this.formData.width * timex,
          height: this.formData.height * timey,
          x: Math.abs(this.formData.x) * timex,
          y: (config.height - this.formData.y) * timey,
        },
        borderRadius: 0,
        bkType: 0,
        fillStyle: this.formData.colour,
        globalAlpha: 0.6,
        strokeStyle: 'transparent',
        name: 'rectangle'
      }))

      this.canvas.data.locked = 2
      this.canvas.render()
      console.log(this.canvas.data)
    },
    onMessage(event, data) {
      setTimeout(() => {
        console.log(event, data)
      }, 0)
    },
    updateProps() {
      if (!this.canvas.data.pens || !this.canvas.data.pens.length) {
        this.canvas.addNode(new Node({
          text: this.formData.titleShow ? this.formData.name : '',
          rect: {
            width: this.formData.width * timex,
            height: this.formData.height * timey,
            x: Math.abs(this.formData.x) * timex,
            y: (config.height - this.formData.y) * timey,
          },
          borderRadius: 0,
          bkType: 0,
          fillStyle: this.formData.colour,
          globalAlpha: 0.6,
          strokeStyle: 'transparent',
          name: 'rectangle'
        }))
      }

      let pen = this.canvas.data.pens[0]
      pen.text = this.formData.titleShow ? this.formData.name : ''
      pen.rect.width = Math.abs(this.formData.width * timex - 2.4)
      pen.rect.height = Math.abs(this.formData.height * timey - 5)
      pen.rect.x = Math.abs(this.formData.x) * timex + 2.4
      pen.rect.y = (config.height - this.formData.y) * timey + 2.4
      pen.fillStyle = this.formData.colour
      console.log(pen)
      this.canvas.updateProps('', this.canvas.data.pens)
    }
  }
}
</script>
<style lang='scss' scoped>

#topology-canvas {
  width: 100%;
  height: 100%;
}
</style>
